{extend name="public/base"}

{block name="x-body"}

<style>

    .name {
        text-align: right;

        line-height: 1.8em;

        display: -webkit-flex;
        display: flex;

        flex-flow: row nowrap;

        justify-content: space-between;

        align-items: center;
    }

    .name span:first-of-type {
        color: #555;
        font-weight: 600;
    }

    .name span:last-of-type {
        font-size: 12px;
        color: #999;
    }

    .portrait {
        display: -webkit-flex;
        display: flex;

        flex-flow: row nowrap;

        align-items: center;
    }

    .portrait div {
        width: 40px;
        height: 40px;

        margin-right: 5px;

        border-radius: 50%;

        overflow: hidden;
    }

    .portrait span {
        flex-grow: 1;

        color: #444;

        padding: 4px 8px;

        background: #d2d6de;

        border-radius: 4px;

        position: relative;
    }

    .portrait span img {
        padding: 5px 7px;
    }

    .portrait i {
        width: 0px;
        height: 0px;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        border-width: 5px;
        border-style: dashed solid dashed dashed;
        border-color: transparent #d2d6de transparent transparent;
    }

    .admin .portrait, .admin .name {
        flex-direction: row-reverse;
    }

    .admin div {
        margin-left: 5px;
    }

    .admin .name {
        justify-content: flex-start;
    }

    .admin .name span:last-of-type {
        padding-right: 22px;
    }

    .admin span {
        text-align: right;
    }

    .admin i {
        width: 0px;
        height: 0px;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        border-width: 5px;
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent #36BC9B;
    }

    .admin .portrait span {
        flex-grow: 0;

        background: #36BC9B;

        position: relative;

        color: #fff;
    }

</style>
    <div class="x-body">
      <div class="layui-row">
          <div class="layui-col-md12">
              <table class="layui-table layui-form" lay-skin="row">
                  <thead>
                  <tr>
                      <th>评论回复</th>
                  </tr>
                  </thead>

                  <tbody id="content">
                    {volist name="result" id="v"}
                      <tr {if !$v.user_id}class="admin"{/if}>
                          <td>
                              <div class="name">
                                  <span>{$v.username}</span>
                                  <span>{$v.add_time|date="Y-m-d H:i"}</span>
                              </div>

                              <div class="portrait">
                                  <div>
                                      <img src="{if $v.user_id}/static/common/images/user.jpg{else /}/static/common/images/test.gif{/if}" alt="" width="100%">
                                  </div>
                                  <i></i>
                                  <span>
                                        {$v.content}
                                  </span>
                              </div>
                          </td>
                      </tr>
                    {/volist}
                  </tbody>

                  <tfoot>
                    <tr>
                        <td>
                            <form class="layui-form" lay-filter="comment">
                                <input type="hidden" name="pid" value="{$id}">
                                <input type="hidden" name="goods_id" value="{$result.0.goods_id}">
                                <div class="layui-form-item layui-form-text">
                                    <textarea id="details" name="details" style="display: none;" lay-verify="content"></textarea>
                                </div>

                                <div class="layui-form-item" style="text-align: right; margin-bottom: 0;">
                                    <button  class="layui-btn layui-btn-normal" lay-filter="edit" lay-submit="" id="L_repass">
                                        回复
                                    </button>
                                </div>
                            </form>
                        </td>
                    </tr>
                  </tfoot>
              </table>
          </div>
      </div>
    </div>
<script>
    $(function (){
        // 预加载编辑器，表单
        layui.use(['layedit', 'form'], function(){
            var form = layui.form;

            // 同步提交编辑器
            var layedit = layui.layedit;

            // 插入图片
            layedit.set({
                uploadImage: {
                    url: '{:url("goods_upload")}'
                    ,type: 'post',
                }
            });
            //建立编辑器
            var index = layedit.build('details', {
                'height': 100
            });
            form.verify({
                content: function(value) {
                    return layedit.sync(index);
                }
            });

            form.on('submit(edit)', function(data){
                data.field.content = data.field.details;
                delete data.field.details;

                $.post("{:url('goods/comment_cat')}", data.field, function(res){
                    if(res.code == 1){

                        let str = "<tr class='admin'>";
                        str += '<td><div class="name"><span>' + res.data.data.username + '</span><span>' + res.data.data.add_time + '</span></div>';
                        str += '<div class="portrait"><div><img src="/static/common/images/test.gif" alt="" width="100%"></div><i></i><span>' + res.data.data.content + '</span></div></td></tr>';

                        $("#content").append(str);

                        // 清空文本框的内容
                        $(window.frames["LAY_layedit_1"].document).find('body').html('');
                    }else if(res.code == 0){
                        layer.msg(res.msg, {time:1000});
                    }
                }, 'json');

                return false;
            });
        })
    })
</script>
{/block}